<template>
  <div class="resources-view">
    <div class="resources-header">
      <h1>心理健康资源中心</h1>
      <p>探索我们的心理文章、专业机构推荐和自助工具</p>
    </div>

    <div class="resources-tabs">
      <button
        v-for="tab in tabs"
        :key="tab.value"
        :class="['tab-button', { active: activeTab === tab.value }]"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </button>
    </div>

    <div class="resources-content">
      <!-- 文章标签页 -->
      <div v-if="activeTab === 'articles'" class="articles-tab">
        <div class="articles-search">
          <input
            type="text"
            v-model="articleSearch"
            placeholder="搜索文章..."
            class="search-input"
          />
          <select v-model="selectedArticleCategory" class="category-select">
            <option value="all">全部分类</option>
            <option v-for="category in articleCategories" :key="category" :value="category">
              {{ category }}
            </option>
          </select>
        </div>

        <div class="articles-grid">
          <div
            v-for="article in filteredArticles"
            :key="article.id"
            :class="['article-card', { hovered: hoveredArticle === article.id }]"
            @mouseenter="hoveredArticle = article.id"
            @mouseleave="hoveredArticle = null"
            @click="openArticleModal(article)"
          >
            <div class="article-icon">{{ article.icon }}</div>
            <h3 class="article-title">{{ article.title }}</h3>
            <p class="article-excerpt">{{ article.excerpt }}</p>
            <div class="article-meta">
              <span class="article-category">{{ article.category }}</span>
              <span class="article-readtime">{{ article.readTime }} 分钟阅读</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 专业机构标签页 -->
      <div v-if="activeTab === 'organizations'" class="organizations-tab">
        <div class="organizations-list">
          <!-- 机构内容 -->
        </div>
      </div>

      <!-- 自助工具标签页 -->
      <div v-if="activeTab === 'tools'" class="tools-tab">
        <div class="tools-list">
          <!-- 工具内容 -->
        </div>
      </div>

      <!-- 常见问题标签页 -->
      <div v-if="activeTab === 'faq'" class="faq-tab">
        <div class="faq-list">
          <!-- FAQ内容 -->
        </div>
      </div>
    </div>

    <!-- 文章详情模态框 -->
    <div v-if="showArticleModal" class="article-modal" @click="closeArticleModal">
      <div class="article-modal-content" @click.stop>
        <div class="article-modal-header">
          <h2>{{ currentArticle?.title }}</h2>
        </div>
        <div class="article-modal-body">
          <div class="article-content" v-html="currentArticle?.content"></div>
        </div>
        <div class="article-modal-footer">
          <button class="article-modal-back" @click="closeArticleModal">返回列表</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResourcesView',
  data() {
    return {
      activeTab: 'articles',
      articleSearch: '',
      selectedArticleCategory: 'all',
      expandedFaq: null,
      hoveredArticle: null,
      hoveredOrg: null,
      hoveredTool: null,
      showArticleModal: false,
      currentArticle: null,
      tabs: [
        { label: '心理文章', value: 'articles' },
        { label: '专业机构', value: 'organizations' },
        { label: '自助工具', value: 'tools' },
        { label: '常见问题', value: 'faq' }
      ],
      articleCategories: [
        '情绪管理',
        '压力应对',
        '睡眠改善',
        '人际关系',
        '自我成长',
        '心理障碍'
      ],
      articles: [
        // 情绪管理分类文章
        {
            id: 1,
            title: '情绪觉察与接纳的艺术',
            excerpt: '学习如何识别、理解和接纳自己的情绪，建立健康的情绪管理基础。',
            category: '情绪管理',
            readTime: 6,
            date: '2024-01-20',
            icon: '😊',
            content: '# 情绪觉察与接纳的艺术\n\n## 为什么情绪觉察很重要\n\n情绪是我们内心世界的晴雨表，它们传递着关于我们需求、价值观和环境适应状态的重要信息。学会觉察情绪是情绪管理的第一步，也是最重要的一步。\n\n## 如何培养情绪觉察能力\n\n1. **日常情绪记录**：每天花时间记录自己的情绪变化和触发因素\n2. **身体扫描**：注意情绪在身体中的表现（如紧张感、心跳加速等）\n3. **命名情绪**：使用准确的词汇描述你的感受，而不仅仅是「好」或「坏」\n\n## 情绪接纳的练习\n\n情绪接纳并不意味着屈服于负面情绪，而是承认它们的存在并给予自己处理它们的空间。记住，所有情绪都有其价值和目的，即使是那些让我们感到不适的情绪。'
          },
        {
          id: 2,
          title: '积极情绪培养五步法',
          excerpt: '通过简单有效的练习，提升生活中的积极情绪体验，改善心理健康。',
          category: '情绪管理',
          readTime: 5,
          date: '2024-01-15',
          icon: '✨',
          content: '# 积极情绪培养五步法\n\n## 第一步：感恩练习\n\n每天花2分钟记录生活中值得感恩的三件小事。研究表明，持续的感恩练习能显著提升幸福感。\n\n## 第二步：正念呼吸\n\n每天进行5分钟的正念呼吸，专注于当下的感受，减少焦虑和压力。\n\n## 第三步：欣赏美好\n\n主动寻找并欣赏生活中的美好事物，培养对美好体验的敏感性。\n\n## 第四步：积极社交\n\n与支持你的人保持联系，分享积极体验，强化社交支持网络。\n\n## 第五步：成就积累\n\n设定小目标并庆祝完成，通过积累小成功来增强自信心和成就感。'
        },
        // 压力应对分类文章
        {
          id: 3,
          title: '工作压力管理实用指南',
          excerpt: '学习如何在繁忙的工作环境中保持冷静和高效，有效管理工作压力。',
          category: '压力应对',
          readTime: 7,
          date: '2024-01-25',
          icon: '💼',
          content: '# 工作压力管理实用指南\n\n## 工作压力的常见来源\n\n工作压力可能来自多个方面：时间紧迫的任务、复杂的人际关系、过高的期望或技能与岗位不匹配等。了解压力来源是有效管理的基础。\n\n## 时间管理技巧\n\n1. **四象限法则**：将任务按重要性和紧急性分类\n2. **番茄工作法**：25分钟专注工作，5分钟休息\n3. **批量处理**：将相似任务集中处理，减少切换成本\n\n## 建立工作边界\n\n学会说「不」，明确工作时间和个人时间的界限，避免工作过度侵占生活空间。\n\n## 办公室微放松\n\n- 每小时起身活动5分钟\n- 午间短时间冥想\n- 工作间隙进行深呼吸练习'
        },
        {
          id: 4,
          title: '压力与健康：身心平衡之道',
          excerpt: '了解长期压力对身心健康的影响，学习如何建立健康的压力调节机制。',
          category: '压力应对',
          readTime: 6,
          date: '2024-01-18',
          icon: '⚖️',
          content: '# 压力与健康：身心平衡之道\n\n## 压力对身体的影响\n\n长期处于高压状态会影响免疫系统、心血管系统和消化系统的正常功能，增加多种疾病的风险。\n\n## 压力的早期信号\n\n- 睡眠质量下降\n- 注意力不集中\n- 情绪波动大\n- 身体紧张和疼痛\n\n## 身心平衡策略\n\n### 身体层面\n- 规律运动：每周至少150分钟中等强度有氧运动\n- 健康饮食：均衡营养，减少咖啡因和糖分摄入\n- 充足睡眠：保持7-8小时的高质量睡眠\n\n### 心理层面\n- 正念冥想：每天10分钟，培养当下觉知\n- 兴趣爱好：投入能带来愉悦的活动\n- 社会支持：与亲友分享感受，寻求支持'
        },
        // 睡眠改善分类文章
        {
          id: 5,
          title: '打造理想睡眠环境',
          excerpt: '了解环境因素如何影响睡眠质量，学习如何优化卧室环境以促进深度睡眠。',
          category: '睡眠改善',
          readTime: 5,
          date: '2024-01-30',
          icon: '🌙',
          content: '# 打造理想睡眠环境\n\n## 温度与湿度\n\n研究表明，18-20℃（65-68℉）的室温最有利于睡眠。同时，保持40-60%的相对湿度能减少呼吸道不适。\n\n## 光线控制\n\n- 使用遮光窗帘或眼罩，减少外部光线干扰\n- 睡前1小时避免蓝光（手机、电脑屏幕）\n- 如有必要，可使用暖色调小夜灯\n\n## 噪音管理\n\n- 使用耳塞或白噪音机器屏蔽干扰声音\n- 确保卧室门窗密封良好\n- 选择安静的睡眠位置\n\n## 床具选择\n\n合适的床垫和枕头对睡眠质量至关重要。选择能提供良好支撑且舒适的床具，每8-10年更换一次。'
        },
        {
          id: 6,
          title: '睡眠节律与昼夜生物钟',
          excerpt: '了解人体生物钟的工作原理，学习如何调整作息以改善睡眠质量。',
          category: '睡眠改善',
          readTime: 6,
          date: '2024-01-22',
          icon: '⏰',
          content: '# 睡眠节律与昼夜生物钟\n\n## 什么是昼夜节律\n\n昼夜节律是人体24小时的生理周期，由位于下丘脑的视交叉上核控制。它影响睡眠、体温、激素分泌等多种生理功能。\n\n## 光照对生物钟的影响\n\n自然光（特别是早晨的阳光）是调整生物钟的最强大信号。早上暴露在自然光下15-30分钟，有助于重置生物钟。\n\n## 建立规律的睡眠-觉醒周期\n\n- 每天同一时间上床和起床，包括周末\n- 避免白天长时间午睡\n- 睡前建立放松的例行程序\n\n## 应对时差和轮班工作\n\n如果你的工作需要轮班或经常跨时区旅行，学习如何通过光照暴露、饮食时间和短暂休息来帮助身体适应。'
        },
        // 人际关系分类文章
        {
          id: 7,
          title: '有效沟通的三个关键要素',
          excerpt: '学习如何清晰表达自己，积极倾听他人，建立健康、互相尊重的沟通模式。',
          category: '人际关系',
          readTime: 6,
          date: '2024-02-05',
          icon: '💬',
          content: '# 有效沟通的三个关键要素\n\n## 1. 清晰表达\n\n- **使用「我」语句**：表达感受时以「我」开头，避免指责\n- **具体明确**：提供具体例子，避免笼统表述\n- **关注问题**：聚焦于需要解决的问题，而非个人特质\n\n## 2. 积极倾听\n\n- **给予全神贯注**：放下分心的事物，保持眼神接触\n- **非语言反馈**：通过点头、微笑等表达关注\n- **提问和复述**：确保理解对方的意思\n\n## 3. 情绪管理\n\n- **识别情绪触发点**：了解什么会引起强烈情绪反应\n- **暂停技巧**：当情绪高涨时，建议暂时休息\n- **同理心**：尝试理解对方的立场和感受\n\n## 实践练习\n\n每天选择一次互动，有意识地应用这些沟通技巧，并记录效果。随着练习，这些技巧会逐渐成为自然反应。'
        },
        {
          id: 8,
          title: '建立健康边界的艺术',
          excerpt: '学习如何在人际关系中设定健康边界，保护自己的时间、精力和情感健康。',
          category: '人际关系',
          readTime: 7,
          date: '2024-02-01',
          icon: '🛡️',
          content: '# 建立健康边界的艺术\n\n## 什么是健康边界\n\n健康边界是我们与他人互动时的「个人规则手册」，它定义了我们允许他人如何对待我们，以及我们愿意为他人做什么。\n\n## 边界的不同类型\n\n- **身体边界**：个人空间和身体接触的界限\n- **情感边界**：保护情感不受他人操纵或侵犯\n- **时间边界**：如何分配和保护个人时间\n- **物质边界**：关于个人财物的使用规则\n\n## 如何设定边界\n\n1. **自我反思**：确定什么让你感到舒适或不适\n2. **明确表达**：用直接、尊重的方式传达你的边界\n3. **坚持执行**：一致性是边界有效的关键\n4. **处理内疚**：记住设定边界是自我照顾，不是自私\n\n## 常见障碍\n\n- 害怕被拒绝或不被喜欢\n- 过度责任感\n- 不知道如何表达边界\n\n克服这些障碍需要时间和练习，但设定健康边界对人际关系的质量和个人幸福感至关重要。'
        },
        // 自我成长分类文章
        {
          id: 9,
          title: '自我接纳与个人成长',
          excerpt: '了解自我接纳如何促进真正的个人成长，摆脱完美主义的束缚。',
          category: '自我成长',
          readTime: 8,
          date: '2024-02-10',
          icon: '❤️',
          content: '# 自我接纳与个人成长\n\n## 自我接纳的真正含义\n\n自我接纳不是停滞不前，也不是忽视自己的缺点，而是在承认自己现状的基础上，以友善和理解的态度对待自己，包括所有的优点和不足。\n\n## 完美主义的陷阱\n\n完美主义常常被误认为是积极品质，但研究表明，它会导致：\n- 过高的自我期望和随之而来的失望\n- 对失败的过度恐惧\n- 拖延和回避挑战\n- 较低的生活满意度\n\n## 培养自我接纳的实践\n\n1. **日常感恩日记**：每天记录自己的三个优点或成就\n2. **自我对话练习**：注意并改变消极的自我对话\n3. **接纳不完美**：欣赏「足够好」的价值\n\n## 自我接纳与成长的关系\n\n有趣的是，真正的自我接纳反而能促进成长。当我们不再因为自我批评而消耗精力时，我们就能更专注于建设性的改变和进步。'
        },
        {
          id: 10,
          title: '目标设定与执行的SMART法则',
          excerpt: '学习如何使用SMART法则设定有效目标，提高目标实现的可能性。',
          category: '自我成长',
          readTime: 6,
          date: '2024-02-07',
          icon: '🎯',
          content: '# 目标设定与执行的SMART法则\n\n## SMART原则详解\n\nSMART是一个帮助设定有效目标的框架：\n\n- **具体(Specific)**：目标应该清晰明确\n- **可衡量(Measurable)**：有具体的标准来衡量进展\n- **可实现(Achievable)**：具有挑战性但可行\n- **相关性(Relevant)**：与长期价值观和目标一致\n- **时限性(Time-bound)**：有明确的截止日期\n\n## 从大目标到小步骤\n\n将大目标分解为更小、更易管理的子目标，每个子目标也应用SMART原则。\n\n## 跟踪进展\n\n定期检查目标进展，庆祝小成就，并根据需要调整计划。记住，灵活性与坚持同样重要。\n\n## 克服障碍\n\n识别可能的障碍并提前制定应对策略。遇到挫折时，关注可以从经验中学到什么，而不是责备自己。'
        },
        // 心理障碍分类文章
        {
          id: 11,
          title: '焦虑障碍：识别与应对',
          excerpt: '了解焦虑障碍的常见类型、症状表现和有效的应对策略。',
          category: '心理障碍',
          readTime: 9,
          date: '2024-02-15',
          icon: '😰',
          content: '# 焦虑障碍：识别与应对\n\n## 焦虑障碍的类型\n\n- **广泛性焦虑障碍(GAD)**：持续、过度的担忧\n- **惊恐障碍**：突然发作的强烈恐惧\n- **社交焦虑障碍**：对社交场合的过度恐惧\n- **特定恐惧症**：对特定物体或情境的强烈恐惧\n- **强迫症(OCD)**：反复出现的想法和行为\n\n## 常见症状\n\n### 身体症状\n- 心跳加速或心悸\n- 呼吸急促\n- 出汗\n- 颤抖\n- 肌肉紧张\n\n### 心理症状\n- 过度担忧\n- 注意力不集中\n- 易怒\n- 睡眠问题\n\n## 有效的应对策略\n\n- **认知行为疗法(CBT)**：改变负面思维模式\n- **放松技巧**：深呼吸、渐进式肌肉放松\n- **正念冥想**：帮助专注当下，减少担忧\n- **生活方式调整**：规律运动、健康饮食、充足睡眠\n\n## 寻求专业帮助\n\n如果焦虑严重影响日常生活，不要犹豫寻求心理健康专业人士的帮助。早期干预可以显著提高治疗效果。'
        },
        {
          id: 12,
          title: '抑郁症的理解与支持',
          excerpt: '了解抑郁症的症状、风险因素和支持策略，帮助自己或身边的人。',
          category: '心理障碍',
          readTime: 8,
          date: '2024-02-12',
          icon: '🌧️',
          content: '# 抑郁症的理解与支持\n\n## 抑郁症的核心症状\n\n抑郁症不仅仅是「情绪低落」，它是一种复杂的心理健康状况，主要症状包括：\n\n- 持续的悲伤、空虚或绝望感\n- 对以前感兴趣的活动失去兴趣\n- 睡眠和食欲变化\n- 精力不足和疲劳\n- 注意力和决策困难\n- 自杀念头或行为\n\n## 风险因素\n\n- 生物学因素：基因、大脑化学物质不平衡\n- 心理因素：低自尊、完美主义倾向\n- 环境因素：压力生活事件、创伤经历\n- 社会因素：孤立、缺乏支持\n\n## 有效的治疗方法\n\n- **药物治疗**：抗抑郁药可以帮助调节大脑化学物质\n- **心理治疗**：认知行为疗法、人际治疗等\n- **生活方式改变**：规律运动、健康饮食、良好睡眠\n- **社会支持**：与亲友保持联系，加入支持团体\n\n## 如何支持他人\n\n- 认真对待他们的感受\n- 提供陪伴而非建议\n- 鼓励寻求专业帮助\n- 耐心和理解\n- 关注他们的安全'
        }
      ]
    }
  },
  computed: {
    filteredArticles() {
      return this.articles.filter(article => {
        const matchesSearch = article.title.toLowerCase().includes(this.articleSearch.toLowerCase()) ||
                            article.excerpt.toLowerCase().includes(this.articleSearch.toLowerCase());
        const matchesCategory = this.selectedArticleCategory === 'all' || article.category === this.selectedArticleCategory;
        return matchesSearch && matchesCategory;
      });
    }
  },
  methods: {
    openArticleModal(article) {
      this.currentArticle = article;
      this.showArticleModal = true;
    },
    closeArticleModal() {
      this.showArticleModal = false;
      this.currentArticle = null;
    }
  }
}
</script>

<style scoped>
.resources-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.resources-header {
  text-align: center;
  margin-bottom: 40px;
}

.resources-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.resources-header p {
  font-size: 1.1rem;
  color: #7f8c8d;
}

.resources-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #ecf0f1;
}

.tab-button {
  padding: 12px 24px;
  margin: 0 10px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #7f8c8d;
}

.tab-button:hover {
  color: #3498db;
}

.tab-button.active {
  color: #3498db;
  border-bottom-color: #3498db;
}

.articles-search {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

.search-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
}

.category-select {
  padding: 12px;
  border: 2px solid #ecf0f1;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.category-select:focus {
  outline: none;
  border-color: #3498db;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.article-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.article-card:hover,
.article-card.hovered {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  border-color: #3498db;
}

.article-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.article-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.article-excerpt {
  color: #7f8c8d;
  margin-bottom: 20px;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-category {
  background: #ecf0f1;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.article-readtime {
  font-size: 0.85rem;
  color: #95a5a6;
}

.article-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.article-modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.article-modal-header {
  padding: 25px;
  border-bottom: 1px solid #ecf0f1;
}

.article-modal-header h2 {
  font-size: 2rem;
  color: #2c3e50;
  margin: 0;
}

.article-modal-body {
  padding: 25px;
}

.article-content {
  line-height: 1.8;
  color: #34495e;
}

.article-content h1,
.article-content h2,
.article-content h3 {
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 15px;
}

.article-content p {
  margin-bottom: 20px;
}

.article-modal-footer {
  padding: 25px;
  border-top: 1px solid #ecf0f1;
  text-align: center;
}

.article-modal-back {
  padding: 12px 30px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.article-modal-back:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  .articles-search {
    flex-direction: column;
  }

  .tab-button {
    padding: 10px 15px;
    margin: 0 5px;
    font-size: 0.9rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .resources-header h1 {
    font-size: 2rem;
  }
}
</style>